<template>
  <div v-if="tip">
    <n-tooltip placement="top-start" trigger="hover">
      <template #trigger>
        <div class="flex items-center" :class="text?'space-x-1':''" :style="`font-size: ${size}px`">
          <n-icon v-if="icon">
            <icon :icon="icon"></icon>
          </n-icon>
          <p>
            {{ text }}
            <slot name="text"></slot>
          </p>
        </div>
      </template>
      {{ tip }}
    </n-tooltip>
  </div>
  <div v-else>
    <div class="flex items-center" :class="text?'space-x-1':''" :style="`font-size: ${size}px`">
      <n-icon v-if="icon">
        <icon :icon="icon"></icon>
      </n-icon>
      <p >
        {{ text }}
        <slot name="text"></slot>
      </p>
    </div>
  </div>

</template>

<script setup lang="ts">

import {Icon} from "@iconify/vue";

defineProps({
  icon: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 18
  },
  tip: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>

</style>